<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      #threejs {
        display: block;
        width: 100vw;
        height: 100vh;
      }
    </style>
  </head>
  <body>
    <canvas id="threejs"></canvas>
    <script type="importmap">
      {
        "imports": {
          "three": "/js/threejs/build/three.module.min.js",
          "three/addons/": "/js/threejs/jsm/"
        }
      }
    </script>
    <script type="module">
      import * as THREE from 'three'
      import { OrbitControls } from 'three/addons/controls/OrbitControls.js'
      import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js'
      import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js'
      import { MeshoptDecoder } from 'three/addons/libs/meshopt_decoder.module.js'
      import { KTX2Loader } from 'three/addons/loaders/KTX2Loader.js'

      const scene = new THREE.Scene()
      const camera = new THREE.PerspectiveCamera(
        75,
        window.innerWidth / window.innerHeight,
        0.1,
        10000
      )
      camera.position.set(16, 16, 0)
      const renderer = new THREE.WebGLRenderer({
        canvas: document.querySelector('#threejs'),
        alpha: true,
        antialias: true,
      })
      renderer.setPixelRatio(window.devicePixelRatio)
      renderer.setSize(window.innerWidth, window.innerHeight)

      const ambinentLight = new THREE.AmbientLight(0xffffff, 0.5)
      scene.add(ambinentLight)
      const pointLight = new THREE.PointLight(0xffffff, 0.5)
      camera.add(pointLight)

      const controls = new OrbitControls(camera, renderer.domElement)

      const gltfLoader = new GLTFLoader()
      const dracoLoader = new DRACOLoader()
      dracoLoader.setDecoderPath('/js/threejs/jsm/libs/draco/')
      // gltfLoader.setDRACOLoader(dracoLoader)
      gltfLoader.setMeshoptDecoder(MeshoptDecoder)
      const ktx2Loader = new KTX2Loader()
      ktx2Loader.setTranscoderPath('/js/threejs/jsm/libs/basis/')
      ktx2Loader.detectSupport(renderer)
      gltfLoader.setKTX2Loader(ktx2Loader)


      gltfLoader.load('/models/data_center_hostdime/scene.glb', async gltf => {
        const { scene: model } = gltf
        const model965 = model.getObjectByName('Object_965')
        const model966 = model.getObjectByName('Object_966')
        model965.removeFromParent()
        model966.removeFromParent()
        await renderer.compileAsync(model, camera, scene)
        model.position.set(-51.25, 0, 0)
        camera.lookAt(model.position)
        scene.add(model)
      })

      const render = () => {
        renderer.render(scene, camera)
        requestAnimationFrame(render)
      }
      requestAnimationFrame(render)
    </script>
  </body>
</html>
